<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import { Popup } from "vant";

export default defineComponent({
    components: {
        [Popup.name]: Popup,
    },
    setup() {
        const open = ref(false);
        const announcement = ref({});
        const show = (item) => {
            open.value = true;
            announcement.value = item;
        };
        return {
            open,
            announcement,
            show,
        };
    },
});
</script>
<template>
    <!-- 右侧弹出 -->
    <van-popup v-model:show="open" position="bottom" closeable round close-icon-position="top-left" teleport="body" :style="{ width: '100%', height: '95%', background: '#ffffff' }">
        <div class="content-info">
            <div class="title">{{ announcement.Title }}</div>
            <div class="content" v-html="announcement.Content"></div>
        </div>
    </van-popup>
</template>
<style lang="less" scoped>
.content-info {
    padding: 20px 15px;

    .title {
        padding: 0 25px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        margin-top: 20px;
        line-height: 13px;
        line-height: 22px;
        font-size: 13px;
        word-break: break-all; /* 允许在单词内部任意位置换行 */
        white-space: pre-wrap;
    }
}
</style>